<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        body {
            background: url("../img/bg.png");
        }

        .center {
            /*背景颜色*/
            background-color: white;
            /*宽度*/
            width: 400px;
            /*文本对齐方式*/
            text-align: center;
            /*外边距*/
            margin: auto;
        }
        .div{
            border: black;
            border-width: 2px 2px 2px 2px;
            border-style: solid;

        }
    </style>
</head>
<body>
<div>
    <img src="../img/logo.png">
</div>
<!--中间注册信息-->
<div class="center">
    <div>注册信息</div>
    <hr/>
    <!--表单标签-->
    <form action="#" method="get" autocomplete="off">
        <div>
            <label for="username">姓名</label>
            <input name="username" id="username" type="text" value="" placeholder="在此输入姓名" required="required">
        </div>
        <div>
            <label for="password">密码</label>
            <input name="password" id="password" type="password" value="" placeholder="在此输入密码" required="required">
        </div>
        <div>
            <label for="email">邮箱</label>
            <input name="email" id="email" type="email" value="" placeholder="在此输入邮箱" required="required">
        </div>
        <div>
            <label for="tel">手机号</label>
            <input name="tel" id="tel" type="tel" value="" placeholder="在此输入手机号" required="required">
        </div>
        <hr/>

        <div>
            <label for="ssex">性别:</label> &nbsp;&nbsp;&nbsp;
            <input type="radio" id="ssex" name="ssex" value="men">男
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
            <input type="radio" name="ssex" value="women">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
            <label for="hobby">爱好:</label>
            <input type="checkbox" id="hobby" name="hobby" value="music">音乐&nbsp;
            <input type="checkbox" name="hobby" value="movie">电影&nbsp;
            <input type="checkbox" name="hobby" value="game">游戏
        </div>
        <div>
            <label for="birthday">出生日期:</label>
            <input type="date" id="birthday" name="birthday" value="">
        </div>
        <div>
            <label for="city">所在城市:</label>
            <select id="city" name="city">
                <option>
                    ---请选择城市---
                </option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="省会市">
                    <option>西安</option>
                    <option>杭州</option>
                    <option>郑州</option>
                    <option>武汉</option>
                </optgroup>
            </select>
        </div>
        <hr/>
        <div>
        <br>
            <label for="sign">个性签名:</label>
            <textarea name="sign" id="sign" rows="5" cols="30" placeholder="请写下你的与众不同"  class="div"></textarea>
        </div>
        <hr/>
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>
</body>
</html>